<template>
  <view class="page-body">
    <div v-if="true" class="page-list">
      <div class="page-item" v-for="(item, index) in pageData.list" :key="index">
        <div class="font-w-600 u-font-30 u-p-b-24 border-b">
          问：{{ item.question }}
        </div>
        <div class="u-p-t-24 u-p-b-24">
          <UReadMore show-height="360" color="#f0250e">
            <div>
              {{ item.answer || '默认答案' }}
            </div>
          </UReadMore>
        </div>
        <div class="item-date flex-y-center color-main">
          Al智能问答机器人回答时间：{{ item.answer_time }}
        </div>

        <div class="btns flex-x-sb">
          <div class="btn" @click="onDel(item)">删除记录</div>
          <div class="btn btn-1" @click="onCopy(item.answer)">一键复制</div>
        </div>
      </div>
      <u-loadmore :status="pageData.loadmoreStatus"></u-loadmore>
    </div>

    <u-empty v-else mode="data"></u-empty>

    <FootNav :controlList="tabBarData"></FootNav>

  </view>
</template>
<script>
import tabBarData from '../static/js/tabbarJson'
import UReadMore from '../components/u-read-more.vue';
import FootNav from "@/components/diyNew/footNav/index"

export default {
  components: {
    UReadMore,
    FootNav
  },
  data() {
    return {
      tabBarData,
      pageData: {
        page: 1,
        pageSize: 10,
        list: [],
        loadmoreStatus: 'loadmore',
      },
    };
  },
  onLoad() {
    this.loadData();
  },
  onShow() {},
  methods: {
    async loadData(reset, fn) {
      if (reset) {
        let { pageData } = this.$options.data();
        this.pageData = pageData;
      }
      if (this.pageData.loadmoreStatus == 'nomore') return;
      const res = await this.$allrequest.chart.questionList({page: this.pageData.page, limit: this.pageData.pageSize});
      this.pageData.list.push(...res.data.list);
      this.pageData.loadmoreStatus = this.pageData.list.length >= res.data.total ? 'nomore' : 'loadmore';
      this.pageData.page++;
      fn && fn();
    },
    async onDel(item) {
      const res = await this.$allrequest.chart.delQuestion({id: item.id});
			uni.$u.toast(res.msg)
			this.loadData(true)
    },
    onCopy(data) {
      uni.setClipboardData({
        data,
        success: (result)=>{
          this.$utils.toast('复制成功')
        },
        fail: ()=>{},
        complete: ()=>{}
      });
    }
  },
  computed: {},
  watch: {},
  onReachBottom() {
    this.loadData();
  },
  onPullDownRefresh() {
    this.loadData(true, () => uni.stopPullDownRefresh());
  },
};
</script>
<style lang="scss" scoped>
.page-body {
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  min-height: 100vh;
  background: #f5f5f5;
  .page-list {
    padding-top: 24rpx;
    .page-item {
      padding: 24rpx;
      margin: 0 auto 24rpx;
      width: 702rpx;
      background: #ffffff;
      border-radius: 20rpx;
      .item-date {
        height: 76rpx;
        margin-bottom: 24rpx;
        padding: 0 24rpx;
        background: #f8f8f8;
        border-radius: 20rpx;
        font-size: 26rpx;
      }
      .btns {
        .btn {
          width: 316rpx;
          height: 72rpx;
          background: #f2f2f2;
          border-radius: 120rpx;
          line-height: 72rpx;
          text-align: center;
        }
        .btn-1 {
          color: #fff;
          background: #f0250e;
        }
      }
    }
  }
}
</style>
